<!--<template>-->
<!--  <div class="inner-mongolia-map-container">-->
<!--    &lt;!&ndash; 地图标题和控件 &ndash;&gt;-->
<!--    <div class="map-header">-->
<!--      <h2>内蒙古自治区行政区划图</h2>-->
<!--      <div class="controls">-->
<!--        <el-select v-model="selectedCity" placeholder="选择市区" @change="focusOnCity" clearable>-->
<!--          <el-option v-for="city in cityList" :key="city.name" :label="city.name" :value="city.name"></el-option>-->
<!--        </el-select>-->
<!--        <el-button @click="resetView" icon="el-icon-refresh">重置视图</el-button>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 地图容器 &ndash;&gt;-->
<!--    <div class="main-content">-->
<!--      <l-map-->
<!--        ref="map"-->
<!--        :zoom="zoom"-->
<!--        :center="center"-->
<!--        :options="{ zoomControl: false, attributionControl: false }"-->
<!--        style="height: 100%; width: 100%"-->
<!--        @ready="onMapReady"-->
<!--      >-->
<!--        &lt;!&ndash; 离线地图瓦片层 &ndash;&gt;-->
<!--        <l-tile-layer-->
<!--          :url="tileLayerUrl"-->
<!--          :attribution="attribution"-->
<!--          layer-type="base"-->
<!--        ></l-tile-layer>-->

<!--        &lt;!&ndash; GeoJSON图层 - 内蒙古各市区 &ndash;&gt;-->
<!--        <l-geo-json-->
<!--          v-if="innerMongoliaGeoJson"-->
<!--          :geojson="innerMongoliaGeoJson"-->
<!--          :options="geoJsonOptions"-->
<!--          :options-style="styleFunction"-->
<!--        ></l-geo-json>-->

<!--        &lt;!&ndash; 市区名称标注 &ndash;&gt;-->
<!--        <l-marker-->
<!--          v-for="(city, index) in cityCenters"-->
<!--          :key="'city-' + indexnew"-->
<!--          :lat-lng="city.center"-->
<!--          :icon="getLabelIcon(city)"-->
<!--          interactive="false"-->
<!--        ></l-marker>-->
<!--      </l-map>-->

<!--      &lt;!&ndash; 地图图例 &ndash;&gt;-->
<!--      <div class="map-legend">-->
<!--        <h4>内蒙古自治区</h4>-->
<!--        <div class="legend-item">-->
<!--          <div class="color-box" style="background-color: #5470c6;"></div>-->
<!--          <span>呼和浩特市</span>-->
<!--        </div>-->
<!--        <div class="legend-item">-->
<!--          <div class="color-box" style="background-color: #91cc75;"></div>-->
<!--          <span>包头市</span>-->
<!--        </div>-->
<!--        <div class="legend-item">-->
<!--          <div class="color-box" style="background-color: #fac858;"></div>-->
<!--          <span>乌海市</span>-->
<!--        </div>-->
<!--        <div class="legend-item">-->
<!--          <div class="color-box" style="background-color: #ee6666;"></div>-->
<!--          <span>赤峰市</span>-->
<!--        </div>-->
<!--        <div class="legend-item">-->
<!--          <div class="color-box" style="background-color: #73c0de;"></div>-->
<!--          <span>通辽市</span>-->
<!--        </div>-->
<!--        &lt;!&ndash; 更多图例项... &ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 信息面板 &ndash;&gt;-->
<!--    <div class="info-panel" v-if="selectedArea">-->
<!--      <h3>{{ selectedArea.name }}</h3>-->
<!--      <p>地区类型: {{ selectedArea.type || '地级市' }}</p>-->
<!--      <p>人口: {{ selectedArea.population || '暂无数据' }}</p>-->
<!--      <p>面积: {{ selectedArea.area || '暂无数据' }} 平方公里</p>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { LMap, LTileLayer, LGeoJson, LMarker } from 'vue2-leaflet'-->
<!--import L from 'leaflet'-->
<!--import 'leaflet/dist/leaflet.css'-->

<!--// 修复Leaflet默认图标问题-->
<!--delete L.Icon.Default.prototype._getIconUrl-->
<!--L.Icon.Default.mergeOptions({-->
<!--  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),-->
<!--  iconUrl: require('leaflet/dist/images/marker-icon.png'),-->
<!--  shadowUrl: require('leaflet/dist/images/marker-shadow.png')-->
<!--})-->

<!--export default {-->
<!--  name: 'InnerMongoliaMap',-->
<!--  components: {-->
<!--    LMap,-->
<!--    LTileLayer,-->
<!--    LGeoJson,-->
<!--    LMarker-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      zoom: 5,-->
<!--      center: [44.5, 116.5], // 内蒙古大致中心坐标-->
<!--      map: null,-->
<!--      tileLayerUrl: '/offline-map-tiles/{z}/{x}/{y}.png', // 离线瓦片路径-->
<!--      attribution: '© 内蒙古地图',-->

<!--      // GeoJSON数据-->
<!--      innerMongoliaGeoJson: null,-->

<!--      // 市区信息-->
<!--      cityList: [],-->
<!--      selectedCity: null,-->
<!--      selectedArea: null,-->

<!--      // 市区中心点坐标（用于显示地名）-->
<!--      cityCenters: [-->
<!--        { name: '呼和浩特', center: [40.8151, 111.6688], type: 'capital' },-->
<!--        { name: '包头', center: [40.6583, 109.8404], type: 'city' },-->
<!--        { name: '乌海', center: [39.6550, 106.7942], type: 'city' },-->
<!--        { name: '赤峰', center: [42.2578, 118.8886], type: 'city' },-->
<!--        { name: '通辽', center: [43.6529, 122.2440], type: 'city' },-->
<!--        { name: '鄂尔多斯', center: [39.6083, 109.7813], type: 'city' },-->
<!--        { name: '呼伦贝尔', center: [49.2116, 119.7660], type: 'city' },-->
<!--        { name: '巴彦淖尔', center: [40.7432, 107.3878], type: 'city' },-->
<!--        { name: '乌兰察布', center: [41.0347, 113.1322], type: 'city' },-->
<!--        // 盟所在地坐标-->
<!--        { name: '锡林郭勒盟', center: [43.9332, 116.0860], type: 'league' },-->
<!--        { name: '兴安盟', center: [46.0823, 122.0370], type: 'league' },-->
<!--        { name: '阿拉善盟', center: [38.8519, 105.7285], type: 'league' }-->
<!--      ]-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    // GeoJSON配置选项-->
<!--    geoJsonOptions() {-->
<!--      return {-->
<!--        onEachFeature: this.onEachFeature,-->
<!--        filter: this.filterFeature-->
<!--      }-->
<!--    },-->

<!--    // 样式处理函数-->
<!--    styleFunction() {-->
<!--      return (feature) => {-->
<!--        const cityName = feature.properties.name-->
<!--        return {-->
<!--          fillColor: this.getColorForCity(cityName),-->
<!--          weight: 2,-->
<!--          opacity: 1,-->
<!--          color: 'white',-->
<!--          dashArray: '3',-->
<!--          fillOpacity: 0.7-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    onMapReady() {-->
<!--      this.map = this.$refs.map.mapObject-->

<!--      // 添加缩放控件-->
<!--      L.control.zoom({-->
<!--        position: 'bottomright'-->
<!--      }).addTo(this.map)-->

<!--      // 加载GeoJSON数据-->
<!--      this.loadGeoJsonData()-->
<!--    },-->

<!--    // 加载GeoJSON数据-->
<!--    async loadGeoJsonData() {-->
<!--      try {-->
<!--        // // 实际应用中从API或本地文件获取GeoJSON数据-->
<!--        // // 这里使用模拟数据-->
<!--        // const response = await fetch('https://geojson.cn/api/china/1.6.2/150000.json')-->
<!--        // this.innerMongoliaGeoJson = await response.json()-->
<!--        // 从本地导入GeoJSON数据-->
<!--        import('../assets/geojson/nmg.json').then(data => {-->
<!--          this.innerMongoliaGeoJson = data.default-->

<!--        // 提取市区列表-->
<!--        this.extractCityList()-->
<!--        })-->
<!--      } catch (error) {-->
<!--        console.error('加载GeoJSON数据失败:', error)-->
<!--        // 使用模拟数据作为备选-->
<!--        // this.useMockGeoJsonData()-->
<!--      }-->
<!--    },-->

<!--    // 使用模拟的GeoJSON数据-->
<!--    useMockGeoJsonData() {-->
<!--      // 这里是简化的模拟数据，实际应用中应该使用完整的GeoJSON-->
<!--      this.innerMongoliaGeoJson = {-->
<!--        type: 'FeatureCollection',-->
<!--        features: [-->
<!--          // 实际项目中这里应该是内蒙古各市区的详细地理边界数据-->
<!--          {-->
<!--            type: 'Feature',-->
<!--            properties: { name: '呼和浩特市', type: 'city', population: '344万', area: '17224' },-->
<!--            geometry: {-->
<!--              type: 'Polygon',-->
<!--              coordinates: [[[110.5, 40.3], [112.5, 40.3], [112.5, 41.5], [110.5, 41.5], [110.5, 40.3]]]-->
<!--            }-->
<!--          }-->
<!--          // 其他市区数据...-->
<!--        ]-->
<!--      }-->
<!--      this.extractCityList()-->
<!--    },-->

<!--    // 提取市区列表-->
<!--    extractCityList() {-->
<!--      if (this.innerMongoliaGeoJson && this.innerMongoliaGeoJson.features) {-->
<!--        this.cityList = this.innerMongoliaGeoJson.features.map(feature => ({-->
<!--          name: feature.properties.name,-->
<!--          center: this.getFeatureCenter(feature)-->
<!--        }))-->
<!--      }-->
<!--    },-->

<!--    // 获取要素中心点-->
<!--    getFeatureCenter(feature) {-->
<!--      // 简化的中心点计算，实际应该使用更精确的方法-->
<!--      const coordinates = feature.geometry.coordinates[0]-->
<!--      let lats = []-->
<!--      let lngs = []-->

<!--      coordinates.forEach(coord => {-->
<!--        lngs.push(coord[0])-->
<!--        lats.push(coord[1])-->
<!--      })-->

<!--      return [-->
<!--        (Math.min(...lats) + Math.max(...lats)) / 2,-->
<!--        (Math.min(...lngs) + Math.max(...lngs)) / 2-->
<!--      ]-->
<!--    },-->

<!--    // 要素交互处理-->
<!--    onEachFeature(feature, layer) {-->
<!--      layer.on({-->
<!--        mouseover: this.highlightFeature,-->
<!--        mouseout: this.resetHighlight,-->
<!--        click: this.zoomToFeature-->
<!--      })-->
<!--    },-->

<!--    // 过滤要素-->
<!--    filterFeature(feature) {-->
<!--      // 可以在这里添加过滤逻辑-->
<!--      return true-->
<!--    },-->

<!--    // 高亮显示要素-->
<!--    highlightFeature(e) {-->
<!--      const layer = e.target-->
<!--      layer.setStyle({-->
<!--        weight: 4,-->
<!--        color: '#666',-->
<!--        dashArray: '',-->
<!--        fillOpacity: 0.8-->
<!--      })-->

<!--      this.selectedArea = layer.feature.properties-->

<!--      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {-->
<!--        layer.bringToFront()-->
<!--      }-->
<!--    },-->

<!--    // 重置高亮-->
<!--    resetHighlight(e) {-->
<!--      this.geoJsonLayer.resetStyle(e.target)-->
<!--      this.selectedArea = null-->
<!--    },-->

<!--    // 缩放至要素-->
<!--    zoomToFeature(e) {-->
<!--      this.map.fitBounds(e.target.getBounds())-->
<!--    },-->

<!--    // 根据城市名称获取颜色-->
<!--    getColorForCity(cityName) {-->
<!--      const colorMap = {-->
<!--        '呼和浩特市': '#5470c6',-->
<!--        '包头市': '#91cc75',-->
<!--        '乌海市': '#fac858',-->
<!--        '赤峰市': '#ee6666',-->
<!--        '通辽市': '#73c0de',-->
<!--        '鄂尔多斯市': '#3ba272',-->
<!--        '呼伦贝尔市': '#fc8452',-->
<!--        '巴彦淖尔市': '#9a60b4',-->
<!--        '乌兰察布市': '#ea7ccc',-->
<!--        '锡林郭勒盟': '#d7504b',-->
<!--        '兴安盟': '#6e7079',-->
<!--        '阿拉善盟': '#61a0a8'-->
<!--      }-->
<!--      return colorMap[cityName] || '#c4c4c4'-->
<!--    },-->

<!--    // 获取地区标签图标-->
<!--    getLabelIcon(city) {-->
<!--      return L.divIcon({-->
<!--        html: `<div class="city-label ${city.type}">${city.name}</div>`,-->
<!--        className: 'city-label-container',-->
<!--        iconSize: [100, 30],-->
<!--        iconAnchor: [50, 15]-->
<!--      })-->
<!--    },-->

<!--    // 聚焦到选定城市-->
<!--    focusOnCity(cityName) {-->
<!--      const city = this.cityList.find(c => c.name === cityName)-->
<!--      if (city) {-->
<!--        this.map.setView(city.center, 8)-->
<!--      }-->
<!--    },-->

<!--    // 重置视图-->
<!--    resetView() {-->
<!--      this.map.setView(this.center, this.zoom)-->
<!--      this.selectedCity = null-->
<!--      this.selectedArea = null-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    // 组件挂载后初始化数据-->
<!--    this.$nextTick(() => {-->
<!--      if (this.map) {-->
<!--        this.loadGeoJsonData()-->
<!--      }-->
<!--    })-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.inner-mongolia-map-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  height: 100vh;-->
<!--  background: #f5f7fa;-->
<!--}-->

<!--.map-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  padding: 15px 20px;-->
<!--  background: white;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.map-header h2 {-->
<!--  margin: 0;-->
<!--  color: #303133;-->
<!--}-->

<!--.controls {-->
<!--  display: flex;-->
<!--  gap: 10px;-->
<!--}-->

<!--.main-content {-->
<!--  display: flex;-->
<!--  flex: 1;-->
<!--  position: relative;-->
<!--  background: url('../assets/images/login-background.jpg') no-repeat center center;-->
<!--  //background-image: url('../assets/images/login-background.jpg');-->
<!--}-->

<!--.map-legend {-->
<!--  position: absolute;-->
<!--  bottom: 20px;-->
<!--  left: 20px;-->
<!--  z-index: 1000;-->
<!--  background: white;-->
<!--  padding: 15px;-->
<!--  border-radius: 4px;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);-->
<!--  max-width: 200px;-->
<!--}-->

<!--.map-legend h4 {-->
<!--  margin: 0 0 10px 0;-->
<!--  text-align: center;-->
<!--  color: #303133;-->
<!--}-->

<!--.legend-item {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 8px;-->
<!--}-->

<!--.color-box {-->
<!--  width: 16px;-->
<!--  height: 16px;-->
<!--  border-radius: 3px;-->
<!--  margin-right: 8px;-->
<!--}-->

<!--.info-panel {-->
<!--  position: absolute;-->
<!--  top: 80px;-->
<!--  right: 20px;-->
<!--  z-index: 1000;-->
<!--  background: white;-->
<!--  padding: 15px;-->
<!--  border-radius: 4px;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);-->
<!--  min-width: 200px;-->
<!--}-->

<!--.info-panel h3 {-->
<!--  margin: 0 0 10px 0;-->
<!--  color: #303133;-->
<!--  border-bottom: 1px solid #e6e6e6;-->
<!--  padding-bottom: 8px;-->
<!--}-->

<!--.info-panel p {-->
<!--  margin: 5px 0;-->
<!--  color: #606266;-->
<!--  font-size: 14px;-->
<!--}-->
<!--</style>-->

<!--<style>-->
<!--/* 全局样式 */-->
<!--.city-label-container {-->
<!--  background: transparent !important;-->
<!--  border: none !important;-->
<!--}-->

<!--.city-label {-->
<!--  padding: 4px 8px;-->
<!--  background: rgba(255, 255, 255, 0.9);-->
<!--  border-radius: 12px;-->
<!--  border: 1px solid #ddd;-->
<!--  font-size: 12px;-->
<!--  font-weight: bold;-->
<!--  text-align: center;-->
<!--  white-space: nowrap;-->
<!--  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);-->
<!--}-->

<!--.city-label.capital {-->
<!--  background: rgba(84, 112, 198, 0.9);-->
<!--  color: white;-->
<!--  border-color: #3a4f9a;-->
<!--}-->

<!--.leaflet-popup-content {-->
<!--  font-family: 'Helvetica Neue', Arial, sans-serif;-->
<!--}-->

<!--.leaflet-popup-content h4 {-->
<!--  margin: 0 0 8px 0;-->
<!--  color: #303133;-->
<!--}-->

<!--.leaflet-popup-content p {-->
<!--  margin: 4px 0;-->
<!--  color: #606266;-->
<!--}-->
<!--</style>-->
